@import '@/assets/style/util.scss';

.container {
    width: 100%;
    height: 100%;
    @include bg(--gray-1);
    .header {
        display: flex;
        width: 100%;
        height: 40px;
        border-bottom: 1px solid;
        @include bdc(--gray-4);
        padding: 0 10px;
        user-select: none;
        .nav {
            flex: 1;
            height: 100%;
            display: flex;
        }
        .navLeft {
            justify-content: flex-start;
            .navItem {
                padding: 0 10px;
                display: flex;
                align-items: center;
                cursor: pointer;
                gap: 5px;
                @include cl(--gray-9);
                font-size: 14px;
                &:hover {
                    @include bg(--gray-3);
                }
            }
        }
        .navRight {
            justify-content: flex-end;
            .menuItem {
                height: 40px;
                padding: 0 10px;
                line-height: 40px;
                align-items: center;
                font-size: 20px;
                cursor: pointer;
                @include cl(--gray-10);
                &:hover {
                    @include bg(--gray-3);
                }
            }
        }
    }
    .content {
        width: 100%;
        height: calc(100vh - 41px);
        display: grid;
        grid-template-columns: 200px 1fr 300px;
        .thumbnail {
            border-right: 1px solid;
        }
        .settingBar {
            border-left: 1px solid;
        }
        .thumbnail,
        .settingBar {
            height: 100%;
            @include bdc(--gray-4);
        }
        .canvasWarp {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    }
}
